<template>
  <div style="width: 200px;">
    <l-menu :data="data1" defaultActive="2" @menu-click="handleClick"></l-menu>
    <!-- <l-infinite-menu :data="data2" defaultActive="2" active-text-color="red"></l-infinite-menu> -->
  </div>
</template>

<script setup lang="ts">
let data1 = [
  {
    name: '导航1',
    index: '1',
    icon: 'document'
  },
  {
    name: '导航2',
    index: '2',
    icon: 'document'
  },
  {
    name: '导航3',
    index: '3',
    icon: 'document',
    children: [
      {
        name: '导航3-1',
        index: '1',
        icon: 'document'
      },
    ]
  },
]
let data2 = [
  {
    name: '导航1',
    index: '1',
    icon: 'Document'
  },
  {
    name: '导航2',
    index: '2',
    icon: 'Document'
  },
  {
    name: '导航3',
    index: '3',
    icon: 'Document',
    children: [
      {
        name: '导航3-1',
        index: '3-1',
        icon: 'Document',
        children: [
          {
            name: '导航3-1-1',
            index: '3-1-1',
            icon: 'Document',
            children: [
              {
                name: '导航3-1-1-1',
                index: '3-1-1-1',
                icon: 'Document'
              },
            ]
          }
        ]
      },
    ]
  },
]

const handleClick = (index: any) => {
  console.log(index) 
}
</script>

<style scoped lang="scss"></style>